

// export default function Cc1() {
// return <div >cc1</div>
// }



// // components/MyTable.tsx - 美化版表格组件
// import { defineComponent, PropType } from 'vue'

// // 定义表格数据类型
// type TableData = Array<{
//   [key: string]: any
// }>

// // 定义表格列配置
// type Columns = Array<{
//   key: string
//   title: string
//   width?: string | number
//   align?: 'left' | 'center' | 'right'
// }>

// export default defineComponent({
//   name: 'MyTable',
  
//   props: {
//     data: {
//       type: Array as PropType<TableData>,
//       required: true   
//     },
//     columns: {
//       type: Array as PropType<Columns>,
//       required: true
//     },
//     bordered: {
//       type: Boolean,
//       default: true
//     },
//     striped: {
//       type: Boolean,
//       default: true
//     },
//     hoverable: {
//       type: Boolean,
//       default: true
//     },
//     headerBgColor: {
//       type: String,
//       default: '#f8fafc'
//     }
//   },
  
//   setup(props, { slots }) {
//     return () => (
//       <div class="overflow-x-auto rounded-lg shadow-sm">
//         <table class={[
//           'w-full border-collapse',
//           props.bordered ? 'border border-gray-200' : '',
//         ]}>
//           <thead>
//             <tr class={`bg-${props.headerBgColor} text-gray-700`}>
//               {props.columns.map(column => (
//                 <th 
//                   key={column.key}
//                   class={`px-4 py-3 text-sm font-medium ${column.align || 'left'}`}
//                   style={column.width ? { width: typeof column.width === 'number' ? `${column.width}px` : column.width } : {}}
//                 >
//                   {column.title}
//                 </th>
//               ))}
//             </tr>
//           </thead>
//           <tbody>
//             {props.data.map((row, index) => {
//               // 检查是否有默认插槽
//               if (slots.default) {
//                 return slots.default({ row, index })
//               }
              
//               // 默认行渲染
//               return (
//                 <tr 
//                   key={index}
//                   class={[
//                     props.striped && index % 2 === 1 ? 'bg-gray-50' : 'bg-white',
//                     props.hoverable ? 'hover:bg-gray-100 transition-colors duration-150' : '',
//                     'text-gray-800'
//                   ]}
//                 >
//                   {props.columns.map(column => (
//                     <td 
//                       key={column.key}
//                       class={`px-4 py-3 text-sm border-t border-gray-200 ${column.align || 'left'}`}
//                     >
//                       {row[column.key]}
//                     </td>
//                   ))}
//                 </tr>
//               )
//             })}
//           </tbody>
//         </table>
//       </div>
//     )
//   }
// })



// components/MyTable.tsx - 美化版表格组件
import { defineComponent, PropType } from 'vue'

// 定义表格数据类型
type TableData = Array<{
  [key: string]: any
}>

// 定义表格列配置
type Columns = Array<{
  key: string
  title: string
  width?: string | number
  align?: 'left' | 'center' | 'right'
}>

export default defineComponent({
  name: 'MyTable',
  
  props: {
    data: {
      type: Array as PropType<TableData>,
      required: true   
    },
    columns: {
      type: Array as PropType<Columns>,
      required: true
    },
    bordered: {
      type: Boolean,
      default: true
    },
    striped: {
      type: Boolean,
      default: true
    },
    hoverable: {
      type: Boolean,
      default: true
    },
    headerBgColor: {
      type: String,
      default: '#f8fafc'
    }
  },
  
  setup(props, { slots }) {
    return () => (
      <div class="overflow-x-auto rounded-lg shadow-sm">
        <table 
          class={[
            'w-full border-collapse',
            props.bordered ? 'border border-gray-300' : '', // 加粗边框视觉
          ]}
        >
          <thead>
            <tr class={`bg-${props.headerBgColor} text-gray-700`}>
              {props.columns.map(column => (
                <th 
                  key={column.key}
                  class={`px-4 py-3 text-sm font-medium text-${column.align || 'left'}`} 
                  // 统一表头文本对齐
                  style={column.width ? { 
                    width: typeof column.width === 'number' ? `${column.width}px` : column.width,
                    borderRight: props.bordered ? '1px solid gray-300' : 'none' // 表头右侧边框
                  } : {}}
                >
                  {column.title}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {props.data.map((row, index) => {
              if (slots.default) {
                return slots.default({ row, index })
              }
              
              return (
                <tr 
                  key={index}
                  class={[
                    props.striped && index % 2 === 1 ? 'bg-gray-50' : 'bg-white',
                    props.hoverable ? 'hover:bg-gray-100 transition-colors duration-150' : '',
                    'text-gray-800'
                  ]}
                >
                  {props.columns.map(column => (
                    <td 
                      key={column.key}
                      class={`px-4 py-3 text-sm border-t border-gray-300 text-${column.align || 'left'}`}
                      style={props.bordered ? { borderRight: '1px solid gray-300' } : {}} 
                      // 单元格右侧边框
                    >
                      {row[column.key]}
                    </td>
                  ))}
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    )
  }
})